<template>
  <div>
    <v-header></v-header>
    <div class="line"></div>
    <!--导航栏-->
    <v-menu></v-menu>
    <div class="musicHistoryBody">
      <el-card style="margin-top: 40px">
        <div slot="header">
          <span style="font-size: 16px;font-weight: bold">播放历史</span>
          <el-popconfirm title="确认清空播放历史吗？" @confirm="deleteMusicHistory">
            <template #reference>
              <el-link icon="iconfont icon-shanchu" :underline="false" style="float: right"></el-link>
            </template>
          </el-popconfirm>
        </div>
        <div>
          <el-table :data="historyMusicList"
                    :show-header="false"
                    style="width: 100%"
                    empty-text="你不喜欢听歌吗？"
                    element-loading-text="Loading..."
                    element-loading-svg-view-box="-10, -10, 50, 50">
            <el-table-column prop="audioName" label="歌曲名" width="670"/>
            <el-table-column prop="component" width="200">
              <template slot-scope="scope">
                <el-link :underline="false" v-show="true" @click="toPlayMusic(scope.$index)"><i
                  class="iconfont icon-bofangsanjiaoxing"></i>
                </el-link>
                &nbsp;
                <el-link :underline="false" v-show="true"
                         @click="toPlayMusicComment(historyMusicList[scope.$index].hash,historyMusicList[scope.$index].albumId)">
                  <i class="iconfont icon-xiaoxi"></i></el-link>
                &nbsp;
                <el-link :underline="false" v-show="true" @click="likeMusic(scope.$index)">
                  <div v-if="historyMusicList[scope.$index].likeFlag === 1">
                    <i class="iconfont icon-xin2" style="color: red"></i>
                  </div>
                  <div v-else>
                    <i class="iconfont icon-xin"></i>
                  </div>
                </el-link>
                &nbsp;
              </template>
            </el-table-column>
            <el-table-column prop="timeLength" label="时长"/>
          </el-table>
        </div>
      </el-card>


    </div>
  </div>
</template>

<script>
  import header from "../layout/Header";
  import footer from "../layout/Footer";
  import menu from "../layout/Menu";

  export default {
    name: "PlayMusicHistory",
    components: {
      'v-header': header,
      'v-footer': footer,
      'v-menu': menu
    },
    data() {
      return {
        historyMusicList: []
      }
    },
    created() {
      document.title = '播放历史';
      this.getMusicPlayHistory();
    },
    mounted() {
    },
    methods: {
      deleteMusicHistory(){
        this.$axios({
          method:'post',
          url:'/user/deleteMusicHistory',
          headers:{
            authentication:sessionStorage.getItem("token")
          }
        }).then(res => {
          if (res.data.msgCode !== '200') {
            this.$message.warning(res.data.msg)
          } else {
            this.$message.success(`清空成功`);
            this.getMusicPlayHistory();
          }
        })
      },
      //添加喜欢歌曲
      likeMusic(res) {
        if (sessionStorage.getItem("token") != null) {
          this.$axios({
            method: 'post',
            url: '/user/likeMusic',
            dataType: 'json',
            crossDomain: true,
            headers: {
              Authentication: sessionStorage.getItem("token")
            },
            data: {
              hash: this.historyMusicList[res].hash,
              albumId: this.historyMusicList[res].albumId
            }
          }).then(res1 => {
            if (res1.data.msgCode === '-1') {
              this.$message({
                message: '登录过期，请重新登录',
                type: 'warning'
              });
              this.$router.push('/login');
            } else {
              if (this.historyMusicList[res].likeFlag === 1) {
                this.historyMusicList[res].likeFlag = 0;
              } else {
                this.historyMusicList[res].likeFlag = 1;
              }
            }
          })
        } else {
          this.$confirm('您还未登录，请先登录后添加喜欢', '提示', {
            confirmButtonText: '确定',
            type: 'info'
          }).then(() => {
            this.$router.push('/login')
          }).catch(() => {
            this.$router.push('/login')
          })
        }
      },
      //跳转评论
      toPlayMusicComment(hash, albumId) {
        let routeUrl = this.$router.resolve({
          path: '/playMusicComment',
          query: {
            hash: hash,
            albumId: albumId
          }
        });
        window.open(routeUrl.href, '_blank');
      },
      //播放音乐
      toPlayMusic(res) {
        let routeUrl = this.$router.resolve({
          path: '/playMusic',
          query: {
            hash: this.historyMusicList[res].hash,
            albumId: this.historyMusicList[res].albumId
          }
        });
        this.$axios({
          method: 'post',
          url: '/redis/setMusicPlayQueue',
          data: {
            musicPlayQueue: this.historyMusicList
          }
        }).then(res => {
          console.log(res.data);
          window.open(routeUrl.href, '_blank');
        });
      },
      getMusicPlayHistory() {
        this.$axios({
          method: 'post',
          url: '/user/userMusicPlayHistory',
          headers:{
            authentication:sessionStorage.getItem("token")
          }
        }).then(res => {
          if (res.data.msgCode !== '200') {
            this.$message.warning(res.data.msg)
          } else {
            this.historyMusicList = res.data.data.info;
          }
        })
      }
    }
  }
</script>

<style scoped>
  .musicHistoryBody {
    width: 1000px;
    margin: 0 auto;
  }
</style>
